<template>
  <view class="tree-view" @click.stop>
    <Tree
        :isBuy="isBuy"
        @toggle="onNodeToggle"
        v-for="(child, index) in treeData"
        :key="child.id || index"
        :courseOutline="child"
    />
  </view>
</template>

<script>
import Tree from './tree.vue';

export default {
  name: 'TreeView',
  components: { Tree },
  props: {
    // 根节点数据
    rootData: {
      type: Array,
      required: true
    },
    // 是否购买
    isBuy: {
      type: Boolean,
      required: true
    },
  },
  data() {
    return {
      treeData:[],
      id: ''
    };
  },
  onReady() {
    // 初始化根节点
  },
  methods: {
    // 初始化根节点
    addTreePropertiesReactive(treeData, vm) {
      return treeData.map(node => {
        const newNode = { ...node };
        vm.$set(newNode, 'expanded', false);
        if (newNode.children && newNode.children.length > 0) {
          newNode.children = this.addTreePropertiesReactive(newNode.children, vm);
        }
        return newNode;
      });
    },

    // 处理节点展开/折叠
    onNodeToggle(node) {
      console.log(node)
      // 触发事件
      if(this.id !== ''){
        node['ids'] = this.id;
      }
      if(!node.isLeaf){
        this.$emit('toggle', node);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tree-view {
  width: 100%;
  overflow: auto;
}
</style>